<template>
<div class="rightBody">
  <div class="xxgkl box">
    <h1>信息公开专栏</h1>
    <h2><span></span><a href="#">招生章程</a></h2>
    <h2><span></span><a href="#">历年录取分数线</a><div></div><span></span><a href="#">历年招生计划</a></h2>
    <h2><span></span><a href="#">名单公示</a></h2>
    <h2><span></span><a href="#">2020年录取查询</a><div></div><span></span><a href="#">通知书验证</a></h2>

  </div>
  <div class="faq box">
    <h1><a href="#">FAQ</a></h1>
    <h2><a href="#">常见问题</a></h2>
    <p><a href="#">近期热点问题</a></p>
    <div class="flex des">
      <p><a href="#">自主招生</a></p><div class="columnLine"></div><p><a href="#">保送生</a></p><div class="columnLine"></div><p><a href="#">特长生</a></p>
    </div>
    <div class="flex des">
      <p><a href="#">港澳台侨</a></p><div class="columnLine"></div><p><a href="#">普通高考</a></p>
    </div>
    <p><a href="#">更多</a></p>
  </div>
  <div class="conbox box">
    <el-carousel height="190px" class="swipe" :interval="interval" arrow="never">
      <el-carousel-item v-for="(item,index) in spMain" :key="'spMain'+index">
        <div class="swipeItem flex">
          <img :src="item.img">
          <h1>{{item.title}}</h1>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</div>
</template>

<script>
import Vue from 'vue';
import {Carousel,CarouselItem} from 'element-ui';
Vue.use(Carousel);
Vue.use(CarouselItem);
export default {
name: "rightBody",
  props:{
    spMain:{
      type:Array
    }
  },
  data(){
  return{
    interval:3000
  }
  }
}
</script>

<style lang="less" scoped>
.xxgkl{
  width: 330px;
  padding: 20px 30px;
  background: url("../../../assets/img/home/rightBody1_bg.png") no-repeat;
  background-size: cover;
  a:visited{color: #000}
  a:hover{color: #000;}
  h1{
    color: #004e72;
    font-size: 20px;
    font-weight: normal;
  }
  h2{
    font-size: 16px;
    color: #313131;
    font-weight: normal;
    line-height: 38px;
  }
  div{
    display: inline-block;
    width: 30px;
  }
  span{
    font-size: 12px;
    padding: 0 3px;
    background-color: #000;
    margin-right: 8px;
  }
}
.faq{
  width: 330px;
  padding: 20px 30px;
  background-color: #33CCCC;
  color: #fff;
  a:visited{color: #fff}
  a:hover{color: #fff;}
  h1{
    font-size: 36px;
    font-weight: normal;
  }
  h2{
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 10px;
  }
  p{

    //background-color: pink;
    font-size: 14px;
    line-height: 30px;

  }
  .des{
    p{
      width: 80px;
      text-align: center;
    }
  }
  .columnLine{
    margin: 8px 0 0 0;
    display: inline-block;
    width: 2px;
    height: 15px;
    background-color: #fff;
  }
}
.conbox{
  height: 190px;
  width: 330px;
  .swipe{
    .swipeItem{
      padding: 20px;
      img{
        width: 140px;
        height: 120px;
        margin-right: 10px;
      }
      h1{
        font-size: 16px;
        font-weight: normal;
        line-height: 30px;
      }
    }
  }
}
/deep/ .el-carousel__button{
  width:8px;
  height: 8px;
  border-radius: 50%;
  background-color: #5382AC;
}
</style>